<form nz-form #editionCreateForm="ngForm" (ngSubmit)="save()" autocomplete="off">
    <div class="modal-header">
        <div class="modal-title">
            <i nz-icon type="medicine-box" class="mr-sm"></i>
            <span>{{'CreateNewEdition' | localize}}</span>
        </div>
    </div>
    <fieldset>
        <nz-tabset>
            <nz-tab [nzTitle]="l('EditionProperties')">
                <nz-form-item nz-row>
                    <nz-form-label nzFor="EditionDisplayName" nzRequired>
                        {{"EditionName" | localize}}
                    </nz-form-label>
                    <nz-form-control nzHasFeedback>
                        <input nz-input id="EditionDisplayName" #editionNameInput="ngModel" name="EditionDisplayName"
                            [(ngModel)]="edition.edition.DisplayName" required maxlength="64">
                        <nz-form-explain *ngIf="editionNameInput.dirty && editionNameInput.errors">
                            <validation-messages [formCtrl]="editionNameInput"></validation-messages>
                        </nz-form-explain>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="SubscriptionPrice">
                        {{"SubscriptionPrice" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <nz-radio-group name="SubscriptionPrice" [(ngModel)]="isFree" (ngModelChange)="resetPrices($event)">
                            <label nz-radio [nzValue]="true">{{"Free" | localize}}</label>
                            <label nz-radio [nzValue]="false">{{"Paid" | localize}}</label>
                        </nz-radio-group>
                        <div nz-row *ngIf="!isFree" nzGutter="8">
                            <div nz-col nzSpan="12">
                                <nz-form-label nzFor="MonthlyPrice" [nzRequired]="!isFree">
                                    {{"MonthlyPrice" | localize}}
                                </nz-form-label>
                                <nz-form-control nzHasFeedback>
                                    <nz-input-group nzAddOnBefore="$">
                                        <input nz-input type="number" id="MonthlyPrice" #monthlyPriceInput="ngModel" name="MonthlyPrice"
                                            [(ngModel)]="edition.edition.monthlyPrice" [required]="!isFree">
                                    </nz-input-group>
                                    <nz-form-explain *ngIf="monthlyPriceInput.dirty && monthlyPriceInput.errors">
                                        <validation-messages [formCtrl]="monthlyPriceInput"></validation-messages>
                                    </nz-form-explain>
                                </nz-form-control>
                            </div>
                            <div nz-col nzSpan="12">
                                <nz-form-label nzFor="AnnualPrice" [nzRequired]="!isFree">
                                    {{"AnnualPrice" | localize}}
                                </nz-form-label>
                                <nz-form-control nzHasFeedback>
                                    <nz-input-group nzAddOnBefore="$">
                                        <input nz-input type="number" id="AnnualPrice" #annualPriceInput="ngModel" name="AnnualPrice"
                                            [(ngModel)]="edition.edition.annualPrice" [required]="!isFree">
                                    </nz-input-group>
                                    <nz-form-explain *ngIf="annualPriceInput.dirty && annualPriceInput.errors">
                                        <validation-messages [formCtrl]="annualPriceInput"></validation-messages>
                                    </nz-form-explain>
                                </nz-form-control>
                            </div>
                        </div>
                        <div [hidden]="isFree">
                            <div>
                                <label nz-checkbox name="IsTrialActive" [(ngModel)]="isTrialActive">{{"IsTrialActive" | localize}}</label>
                                <div *ngIf="isTrialActive">
                                    <nz-form-label nzFor="TrialDayCount" [nzRequired]="isTrialActive">
                                        {{"TrialDayCount" | localize}}
                                    </nz-form-label>
                                    <nz-form-control nzHasFeedback>
                                        <input nz-input id="TrialDayCount" #trialDayCountInput="ngModel" name="TrialDayCount"
                                            [(ngModel)]="edition.edition.trialDayCount" [required]="isTrialActive">
                                        <nz-form-explain *ngIf="trialDayCountInput.dirty && trialDayCountInput.errors">
                                            <validation-messages [formCtrl]="trialDayCountInput"></validation-messages>
                                        </nz-form-explain>
                                    </nz-form-control>
                                </div>
                            </div>
                            <div>
                                <label nz-checkbox name="IsWaitingDayActive" [(ngModel)]="isWaitingDayActive">{{"WaitAfterSubscriptionExpireDate" | localize}}</label>
                                <div *ngIf="isWaitingDayActive">
                                    <nz-form-label nzFor="WaitingDayAfterExpire" [nzRequired]="isWaitingDayActive">
                                        {{"WaitingDayAfterExpire" | localize}}
                                    </nz-form-label>
                                    <nz-form-control nzHasFeedback>
                                        <input nz-input id="WaitingDayAfterExpire" #waitingDayAfterExpireInput="ngModel"
                                            name="WaitingDayAfterExpire" [(ngModel)]="edition.edition.waitingDayAfterExpire"
                                            [required]="isWaitingDayActive">
                                        <nz-form-explain *ngIf="waitingDayAfterExpireInput.dirty && waitingDayAfterExpireInput.errors">
                                            <validation-messages [formCtrl]="waitingDayAfterExpireInput"></validation-messages>
                                        </nz-form-explain>
                                    </nz-form-control>
                                </div>
                            </div>
                            <div nz-row>
                                <nz-form-label nzFor="ExpireAction">
                                    {{"WhatWillDoneAfterSubscriptionExpiry" | localize}}
                                </nz-form-label>
                                <nz-form-control>
                                    <nz-radio-group name="ExpireAction" [(ngModel)]="expireAction" (ngModelChange)="removeExpiringEdition($event)">
                                        <label nz-radio [nzValue]="expireActionEnum.DeactiveTenant">{{"DeactiveTenant" | localize}}</label>
                                        <label nz-radio [nzValue]="expireActionEnum.AssignToAnotherEdition">{{"AssignToAnotherEdition" | localize}}</label>
                                    </nz-radio-group>
                                    <nz-select *ngIf="expireAction == expireActionEnum.AssignToAnotherEdition"
                                        [(ngModel)]="edition.edition.expiringEditionId" id="expiringEdition" name="ExpiringEdition">
                                        <nz-option *ngFor="let expiringEdition of expiringEditions" [nzLabel]="expiringEdition.displayText"
                                            [nzValue]="expiringEdition.value"></nz-option>
                                    </nz-select>
                                </nz-form-control>
                            </div>
                        </div>
                    </nz-form-control>
                </nz-form-item>
            </nz-tab>
            <nz-tab [nzTitle]="l('Features')">
                <feature-tree #featureTree></feature-tree>
            </nz-tab>
        </nz-tabset>
    </fieldset>
    <div class="modal-footer">
        <button nz-button type="button" [disabled]="saving" (click)="close()"> {{"Cancel" | localize}} </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!editionCreateForm.form.valid||saving">
            <i nz-icon type="save"></i> {{"Save" | localize}} </button>
    </div>
</form>